import React from 'react'

//2.引入ant框架
import { Button, Space, Swiper, Toast } from 'antd-mobile'
//3.引入环境变量展示图片
import { $pre } from '../../../../http/http'
//4.引入自己的less
import '../Pnew/Pnew.less'

//3.引入路由实现页面跳转 withRouter伴随路由,可以让非路由组件实现页面的跳转
import { Link, withRouter } from 'react-router-dom'

function Pnew(props) {
    let { pnew } = props
    return (
        <div>
            <h1>新人专享</h1>
            <Swiper autoplay loop={true} style={{ '--height': '3.8rem' }} slideSize={40}>
                {pnew.map(item => {
                    return (
                        <Swiper.Item key={item.id} key={item.id} onClick={() => {
                            props.history.push('/detail/'+item.id)
                        }}>
                            <div className='new'>
                                <img src={$pre + item.img} alt="" style={{ 'height': '60%', 'width': '100%' }} />
                                <div className='flex'>
                                    <div>
                                        <p>￥{item.price}</p>
                                        <p className='market'>￥{item.market_price}</p>
                                    </div>
                                    <span className='iconfont icon-gouwucheman' key={item.id} onClick={(e) => {
                                        //阻止冒泡
                                        e.stopPropagation()
                                        props.history.push('/shop/'+item.id)
                                    }}></span>
                                </div>
                            </div>
                        </Swiper.Item>
                    )
                })}
            </Swiper>


        </div>
    )
}

export default withRouter(Pnew)
